<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>衣单</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
	<link rel="stylesheet" href="__PUBLIC__/client/css/cui.css?sj={$tj}" />
	<link rel="stylesheet" href="__PUBLIC__/auntie/css/style.css?sj={$tj}" />
    <script type="text/javascript" src="__PUBLIC__/auntie/js/jquery.js"></script>
    <script type="text/javascript" src="__PUBLIC__/auntie/js/lib.js?sj={$tj}"></script>
  	<style>
  		.bd28 .row1 a.on{	background-color: #47b8e1; }
  		.hm-done,.hm-con .check.on,.btn-yellow { background-color: #47b8e1; }
  	</style>
</head>
<body class="mhome hm-body-2" style="background-color:#fff;">
    <div class="viewport">
        <div id="bd" class="bd28 fix">
            <div class="row1 tab-hd">
            		<if condition="$order['wash_type']==3 ">
            			    <a href="javascript:;" class="on"><b></b><span><img src="__PUBLIC__/client/images/hm-ico-3.png" alt=""><br>洗鞋</span></a>
            		<else />
                <a href="javascript:;" class="on"><b></b><span><img src="__PUBLIC__/auntie/images/img.jpg" alt=""><br>服装</span></a>
                <a href="javascript:;"><b></b><span><img src="__PUBLIC__/auntie/images/img.jpg" alt=""><br>鞋类</span></a>
                <a href="javascript:;"><b></b><span><img src="__PUBLIC__/auntie/images/img.jpg" alt=""><br>家纺</span></a>
                <a href="javascript:;"><b></b><span><img src="__PUBLIC__/auntie/images/img.jpg" alt=""><br>包包</span></a>
                <a href="javascript:;"><b></b><span><img src="__PUBLIC__/auntie/images/img.jpg" alt=""><br>奢侈品</span></a>

            		</if>
            </div>
            <if condition="$order['wash_type']==3 ">
            		<div class="row2 tab-fd">
            	 	<form id="bbForm">
	                <div class="hm-con" style="display:block;">
	                    <dl>
	                    	<input type="hidden" name="orderid" value="{$orderid}" />
	                    	<volist name="product" id="vo">
	                        <dt>
	                            <a href="javascript:;" class="check" data-name="{$vo.name}" data-price ="{$vo.price}"><span>√</span></a><span class="s1">{$vo.name}</span><span class="s2">小计：￥<em>{$vo.price}</em></span>
	                        </dt>
	                        <dd>
	                        		<div class="yidanbox"> 
	                        		
	                        		</div>
	                            
	                            <a href="javascript:;" class="hm-inp-2 btn-yellow hm-add">+添加</a>
	                        </dd>
	                     </volist>
	                    </dl>
	                </div>
            		</form>
           		</div>
           		
            <else />
            
            <div class="row2 tab-fd">
            	 	<form id="bbForm">
            	 	 <input type="hidden" name="orderid" value="{$orderid}" />
            	 	<!-- 服装 -->
                <div class="hm-con" style="display:block;">
                    <dl>
                    	<volist name="product" id="vo">
                    		<if condition="$vo['type']==1 ">
	                        <dt>
	                            <a href="javascript:;" class="check" data-name="{$vo.name}" data-price ="{$vo.price}"><span>√</span></a><span class="s1">{$vo.name}</span><span class="s2">小计：￥<em>{$vo.price}</em></span>
	                        </dt>
	                        <dd>
	                        		<div class="yidanbox"></div>
	                            <a href="javascript:;" class="hm-inp-2 btn-yellow hm-add">+添加</a>
	                        </dd>
                        </if>
                     </volist>
                    </dl>
                </div>
				<!-- 鞋类 -->
                <div class="hm-con">
                      <dl>
                    	<volist name="product" id="vo">
                    		<if condition="$vo['type']==2 ">
	                        <dt>
	                            <a href="javascript:;" class="check" data-name="{$vo.name}" data-price ="{$vo.price}"><span>√</span></a><span class="s1">{$vo.name}</span><span class="s2">小计：￥<em>{$vo.price}</em></span>
	                        </dt>
	                        <dd>
	                        		<div class="yidanbox"></div>
	                            <a href="javascript:;" class="hm-inp-2 btn-yellow hm-add">+添加</a>
	                        </dd>
                        </if>
                     </volist>
                    </dl>
                </div>
                 <!-- 家纺 -->
                <div class="hm-con">
                     <dl>
                    	<volist name="product" id="vo">
                    		<if condition="$vo['type']==3 ">
	                        <dt>
	                            <a href="javascript:;" class="check" data-name="{$vo.name}" data-price ="{$vo.price}"><span>√</span></a><span class="s1">{$vo.name}</span><span class="s2">小计：￥<em>{$vo.price}</em></span>
	                        </dt>
	                        <dd>
	                        		<div class="yidanbox"></div>
	                            <a href="javascript:;" class="hm-inp-2 btn-yellow hm-add">+添加</a>
	                        </dd>
                        </if>
                     </volist>
                    </dl>
      
                </div>
                <!-- 包包 -->
                <div class="hm-con">
      				<dl>
                    	<volist name="product" id="vo">
                    		<if condition="$vo['type']==4 ">
	                        <dt>
	                            <a href="javascript:;" class="check" data-name="{$vo.name}" data-price ="{$vo.price}"><span>√</span></a><span class="s1">{$vo.name}</span><span class="s2">小计：￥<em>{$vo.price}</em></span>
	                        </dt>
	                        <dd>
	                        		<div class="yidanbox"></div>
	                            <a href="javascript:;" class="hm-inp-2 btn-yellow hm-add">+添加</a>
	                        </dd>
                        </if>
                     </volist>
                    </dl>
                </div>
                <!-- 奢侈品 -->
                <div class="hm-con">
                     <dl>
                    	<volist name="product" id="vo">
                    		<if condition="$vo['type']==5 ">
	                        <dt>
	                            <a href="javascript:;" class="check" data-name="{$vo.name}" data-price ="{$vo.price}"><span>√</span></a><span class="s1">{$vo.name}</span><span class="s2">小计：￥<em>{$vo.price}</em></span>
	                        </dt>
	                        <dd>
	                        		<div class="yidanbox"></div>
	                            <a href="javascript:;" class="hm-inp-2 btn-yellow hm-add">+添加</a>
	                        </dd>
                        </if>
                     </volist>
                    </dl>
  
                </div>
                 <!-- end -->
                </form>
            </div>
            </if>
        </div>
        <div class="c"></div>
        <!--end #bd-->
    </div>
    
    <a href="#" id="submit"  class="hm-done">完成</a>
    
<style>
	.address_box p{
		padding-bottom: 10px;
		text-align: center;
	}
	.address_box label {
	    float: left;
	    display: inline-block;
	    width: 33.333%;
	    margin-bottom: 8px;
	}
	.address_box input[type="checkbox"] {
    		vertical-align: middle;
    		margin-right: 3px;
	}
</style>

<div id="order_bg"></div>
<!-- 弹窗：瑕疵 -->
<div id="xiaci" class="address_box" style="z-index:9999;">
	<i class='close'>X</i>
	<p>选择瑕疵</p>
	<volist name="defect" id="vo">
		 	<label><input type="checkbox" value="{$vo.title}">{$vo.title}</label>
	</volist>
    <div class="c"></div>
	<a href="javascript:;" class="x-btn buttonxc">确定</a>
</div>
<!-- 弹窗：附件 -->
<div id="fujian" class="address_box" style="z-index:9999;">
	<i class='close'>X</i>
	<p>选择附件</p>
	<volist name="annex" id="vo">
		 	<label><input type="checkbox" value="{$vo.title}">{$vo.title}</label>
	</volist>
    <div class="c"></div>
	<a href="javascript:;" class="x-btn buttonfj">确定</a>
</div>

</body>
<script src="__PUBLIC__/business/js/normal.js?sj={$tj}"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>

var thisduix='';

$(function(){
	var boxH = $('.address_box').height();
	$('.address_box').css('top',($(window).height()-boxH-10)/3);
	$('.address_box').css('width',$(window).width()-80);
	$('.address_box').css('left',40);
	
	//关闭地址列表对活框
	$('.address_box i.close').click(function(){
		$('.address_box').hide();
		$('#order_bg').hide();
	});
	//===============================
	//瑕疵
	$('.tag1').live('click',function() {
		$('#order_bg').show();
		$('#xiaci').show();
		thisduix=$(this);
	});
	$('.buttonxc').click(function(){
		var str = '';
		$('#xiaci input:checked').each(function(index, el) { str += $(this).val() + '、';   $(this).removeAttr('checked');  });
        var vasr=str.substr(0,str.length - 1);
        thisduix.parent().find('div').html(vasr);
        thisduix.parent().parent().parent().parent().parent().parent().prev('dt').find('input.xiachi').val(vasr);
		$('.address_box').hide();
		$('#order_bg').hide();
	});
	//==================================
	//附件
	$('.tag2').live('click',function() {
		$('#order_bg').show();
		$('#fujian').show();
		thisduix=$(this);
	});
	$('.buttonfj').click(function(){
		var str = '';
		$('#fujian input:checked').each(function(index, el) { str += $(this).val() + '、';   $(this).removeAttr('checked');  });
        var vasr=str.substr(0,str.length - 1);
        thisduix.parent().find('div').html(vasr);
        thisduix.parent().parent().parent().parent().parent().parent().prev('dt').find('input.fujian').val(vasr);
		$('.address_box').hide();
		$('#order_bg').hide();
	});
	//=========================
	//确定衣单
	$('#submit').on('click',function(){
		 var tourl="{:U('Auntie/Api/quedingsubmit')}";
		 var data=$('#bbForm').serialize();
		 $.post(tourl,data,function(data){
		 	//alert(data);
		    if(data.status==1){
		    		Msg('操做成功!',1);
		    		setTimeout(function(){
					window.location.href="{:U('Auntie/index/order_fuwu',array('orderid'=>$orderid))}";
				},1000);
		    }else{
		    		Msg('操做失败!',2);
		    }
		 });
	});
});
//========
wx.config({
    //debug: true,
    appId: '{$jsapi.appId}',
    timestamp: '{$jsapi.timestamp}',
    nonceStr: '{$jsapi.nonceStr}',
    signature: '{$jsapi.signature}',
    jsApiList: [
      	//所有要调用的 API 都要加到这个列表中
		  'chooseImage',
		  'uploadImage'
    ]
});

wx.ready(function () {
	var imglist=[];	//图片预览数组
	
	$('.pzhaopian').live('click',function() {
		var imhbox=$(this).parent().parent().find('li.li2');
		wx.chooseImage({
		    count: 1, // 默认9
		    sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
		    sourceType: ['album','camera'], // 可以指定来源是相册还是相机，默认二者都有
		    success: function (res) {
		        var localIds = res.localIds; 	// 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
		      	//alert(localIds)
		      	var locaid=localIds.toString().substr(20);
		      	var imghtml='<div class="pic preview" id="'+locaid+'"><img src="'+localIds+'" alt=""><a href="javascript:;" class="del">-</a> <input type="hidden" name="imglist[]" value=""> </div>';
		      	imhbox.append(imghtml);
		      	uploadImage(localIds);		//上传图片
		      	return;
		    }
		});
   });
   
   //上传图片
   function uploadImage(localIds){
		wx.uploadImage({
		    localId: localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
		    isShowProgressTips: 1, // 默认为1，显示进度提示
		    success: function (res) {
		        var serverId = res.serverId; // 返回图片的服务器端ID
		        var tourl="{:U('Auntie/api/dow_img')}";
           		var data={'serverid':serverId};
           		$.post(tourl,data,function(data){
					if(data.status==1){
						//alert(data.msg);
						imglist.push('http://wx.tingzan88.com'+data.msg);  //追加图片列表
						var locaid=localIds.toString().substr(20);
						$('#'+locaid).find('input').val(data.msg);
					}
				});
			}
		});
   }

   //预览图片
   $('.preview').live('click',function() {
   		wx.previewImage({
		      current: imglist[0],
		      urls: imglist
		 });
    });
});
</script>
